        <div class="container">
        <div class="row">
                <div class="twelve columns">
                    <div class="box_c">
                        <div class="box_c_heading cf box_actions">
                            <p class="title"><?=$menu_item ?></p>
                        </div>
                        <div class="box_c_content">
                            <table type="<?=$type?>" class="display dt_act_new mobile_dt3" id="admin_service_item">
                                <thead>
                                    <tr>
                                    <th class="chb_col"><input type="checkbox" class="chSel_all" /></th>
                                        <?php 
										foreach ($fields as $field) {
											if ($field == 'description') {
											echo '<th width="40%">'.$field.'</th>';
											} elseif ($field == 'id' || $field == 'youtube_link' || $field == 'type') {
												continue;
											} else{
												echo '<th>'.$field.'</th>';
											}
										}
                                        ?>
                                    <th class="essential">Actions</th>
                                    </tr>
                                </thead>
                                <tbody>
                                	<?php foreach ($items as $item): ?>
                                    <tr id="<?php echo $item['id']?>">
                                        <td class="chb_col"><input class="del_input" id="<?=$item['id']?>" type="checkbox" name="row_sel" />
                                        </td>
                                        <td><div id="<?=$item['id']?>" class="value"><div id="title_<?=$item['id']?>"><?=$item['title']?></div></div>
                                        <div id="<?=$item['id']?>" class="input" style="display:none"><input value="<?=$item['title']?>"  type="text" id="title_input_<?=$item['id'] ?>" /></div>
                                        </td>
                                        <td class="edit_td">
                                        <div id="<?=$item['id']?>" class="value"><div id="des_<?=$item['id']?>"><?php echo $item['description']?></div></div>
                                        <div id="<?=$item['id']?>" class="input" style="display:none"><textarea style="width:100%; height:200px" type="text" id="des_input_<?php echo $item['id'] ?>"><?php echo $item['description'] ?></textarea></div>
                                        </td>
                                        <td class="edit_td">
                                        <div id="<?=$item['id']?>" class="value">
                                        <img id="curImg_<?=$item['id']?>" width="280px" height="280px" src="<?=base_url($item['image_url'])?>"/></div>
                                        <div class="input" style="display:none" id="<?=$item['id']?>">
                                       <div id="UploadImages_<?=$item['id']?>" rid="<?=$item['id']?>" class="UploadImages">
                                            <noscript>Please enable javascript to upload and crop images.</noscript>
                                        </div>

                                        <div id="PhotoPrevs_<?=$item['id']?>" rid="<?=$item['id']?>" class="PhotoPrevs">
                                            <!-- The cropped images will be populated here -->
                                        </div>
                                       </div>
                                        </td>
                                        <td class="content_actions">
                                        <a id="<?php echo $item['id']?>" href="#" class="sepV_a edit_txt" title="Edit"><img src="<?=base_url()?>resources/admin/img/ico/pencil_gray.png" alt="" /></a>
                                        <a style="display:none" id="<?php echo $item['id']?>" href="#" class="sepV_a save_txt" title="Cancel"><img src="<?=base_url()?>resources/admin/img/ico/save.png" alt="" /></a>
                                        <a style="display:none" id="<?php echo $item['id']?>" href="#" class="sepV_a cancel_txt" title="Cancel"><img src="<?=base_url()?>resources/admin/img/ico/cancel_gray.png" alt="" /></a>
                                        <!--<a href="<?=base_url()?>" class="sepV_a" title="View"><img src="<?=base_url()?>resources/admin/img/ico/preview_gray.png" alt="" /></a>-->
                                        </td>
                                    </tr>
                                    <?php endforeach; ?>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div id="new_record" class="white-popup mfp-hide">
          <form class="nice custom">
          <h1 style="border-bottom:1px solid #EEEEEE">Add New <?=$menu_item ?></h1>
            <div class="formRow">
              <label for="nice_text_expanded">Title*</label>
              <input type="text" id="title" name="nice_text_expanded" class="input-text expand">
            </div>
            <div class="formRow">
                <label for="nice_textarea">Description*</label>
                <textarea style="height:200px" name="nice_textarea" class="expand" id="description" cols="1" rows="5"></textarea>
            </div>
            <div class="formRow">
                <div id="UploadImages">
                    <noscript>Please enable javascript to upload and crop images.</noscript>
                </div>
                <div id="PhotoPrevs">
                    <!-- The cropped images will be populated here -->
                </div>
            </div>
            <div class="formRow">
                <a id="submit_new" style="float:right" class="button blue small radius nice" href="#">Submit</a>
            </div>
          </form>
        </div>
        <script src="<?=base_url()?>resources/admin/js/admin_service_item_ajax.js"></script>
        <script type="text/javascript">
		  //$(function() {
		  $(document).ready(function() {
			  $( ".UploadImages" ).each(function() {
				  var id=$(this).attr('rid');
				  $('#UploadImages_'+id).uberuploadcropper({
					  //---------------------------------------------------
					  // uploadify options..
					  //---------------------------------------------------
					  fineuploader: {
						  //debug : true,
						  request	: { 
							  // params: {}
							  endpoint: baseurl + 'upload/action' 
						  },						
						  validation: {
							  sizeLimit	: 1024 * 1000, //in bytes
							  allowedExtensions: ['jpg','jpeg','png','gif']
						  }
					  },
					  //---------------------------------------------------
					  //now the cropper options..
					  //---------------------------------------------------
					  jcrop: {
						  aspectRatio  : 2, 
						  allowSelect  : false, //can reselect
						  allowResize  : true,  //can resize selection
						  setSelect    : [ 0, 0, 200, 100 ], //these are the dimensions of the crop box x1,y1,x2,y2
						  minSize      : [ 200, 100 ], //if you want to be able to resize, use these
						  maxSize      : [ 380, 380 ]
					  },
					  //---------------------------------------------------
					  //now the uber options..
					  //---------------------------------------------------
					  folder           : baseurl + 'resources/upload_imgs/', // only used in uber, not passed to server
					  cropAction       : baseurl + 'crop/action', // server side request to crop image
					  onComplete       : function(e,imgs,data){ 
						  var $PhotoPrevs = $('#PhotoPrevs_'+id);
  
						  for(var i=0,l=imgs.length; i<l; i++){
							  $('.qq-upload-list').empty();
							  $PhotoPrevs.html('<img width="280px" height="280px" src="<?=base_url()?>resources/upload_imgs/'+ imgs[i].filename +'?d='+ (new Date()).getTime() +'" />');
							  $PhotoPrevs.append('<input id="newImg_'+id+'" type="hidden" name="newImg" value="resources/upload_imgs/'+ imgs[i].filename +'?d='+ (new Date()).getTime() +'" />');
						  }
					  }
				  });
			  });
			 });
		  </script>  
            